<template>
  <div>
    <mt-header title="维修进度">
      <router-link to="/" slot="left">
        <mt-button icon="back"></mt-button>
      </router-link>
      <mt-button  slot="right" v-on:click="popVisibleChange()">筛选</mt-button>
    </mt-header>

    <div>
      <ScheduleItem v-for="child in ScheduleList" :child-data="child"></ScheduleItem>
    </div>

    <mt-popup
      class="pop"
      v-model="popupVisible"
      position="center"
      popup-transition="popup-fade">
      <div style="padding: 20px">
        <select v-model="fqfdept">
          <option v-for="item in deptoptions" :value="item.value">{{item.name}}</option>
        </select>
        <mt-field label="签发始日期" placeholder="" type="date" v-model="kssj"></mt-field>
        <mt-field label="签发止日期" placeholder="" type="date" v-model="jssj"></mt-field>
        <mt-field label="工单编号" placeholder="" v-model="fgdno"></mt-field>
        <mt-radio v-model="wgzt" :options="wgoptions">{{wgzt}}</mt-radio>
        <mt-button type="primary" size="large" v-on:click="getSchedules()">查询</mt-button>
      </div>
    </mt-popup>
  </div>
</template>

<script>
  import ScheduleItem from '../components/ScheduleItem'

  export default {
    name: "SchedulePage",
    created() {
      this.getSchedules();
    },
    data() {
      return {
        ScheduleList: [],
        fgdno: "",
        fqfdept: "",
        kssj: "",
        jssj: "",
        wgzt: "0",
        deptoptions: [
          {name: "所有部门", value: ""},
          {name: "卸船队1队", value: "1036"},
          {name: "卸船队2队", value: "1037"},
          {name: "门机队", value: "854"},
          {name: "保障队", value: "531"}
          ],
        wgoptions: [
          {label: '未完成', value: '0'},
          {label: '已完成', value: '1'},
          {label: '暂停工单', value: '2'}
          ]
        ,
         popupVisible: false
      }
    },
    components: {
      ScheduleItem
    },
    methods: {
      getSchedules() {
        var that = this;
        var params = new Object();
        var url = global.BASE_URL + '/Schedule/getSchedules';
        // params.fgdno = that.$route.params.fgdno;
        params.fuserid='1054'
        params.fgdno = this.fgdno;
        params.fqfdept = this.fqfdept;
        params.kssj = this.kssj;
        params.jssj = this.jssj;
        params.wgzt = this.wgzt;
        this.$http({
          method: 'GET',
          url: url,
          params: params,
        }).then(function (responce) {
          console.log(responce)
          if (that.popupVisible) {
            that.popupVisible = false
          }
          var response1 = responce.data;
          var errorCode = response1.errorCode;
          var errorMessage = response1.errorMessage;
          that.ScheduleList = response1.data;
        }).catch(function (error) {
          console.log(error)
        })
      },
      popVisibleChange(){
        if (this.popupVisible) {
          this.popupVisible = false
        } else {
          this.popupVisible = true
        }
      }
    }

  }


</script>

<style scoped>
  .pop {
    border: 2px;
    border-style: solid;
    border-color: #EEEEEE;
    width: 80%;
    height: auto;
    background: white;
    border-radius: 5px;
  }
</style>
